<template>
  <view class="box">
	  
	  
	  
    <view class="egg-box">
		
		
      <view @click="smashedEgg(item,index)" v-for="(item, index) in giftArr" :key="item.id" class="item">
      
		<view class="vg-parent">
          <view class="egg-size">
            <view v-if="item.sort == currentSelect" class="egg-pic"></view>
            <view class="vg-wfull vg-hfull" v-else>
              <view class="vg-wfull vg-hfull" v-if="item.isOpen">
                <view v-if="item.type==1" class="item-img opentype1"  ></view>
                <view v-else  class="item-img opentype2" ></view>
              </view>
              <view v-else class="item-img unopen" :class="item.sort == currentIndex ? 'active': ''" ></view>
            </view>
          </view>
          <view v-if="item.sort == currentIndex && !item.isOpen" class="text-box"><image class="txt-img" mode="widthFix" src="https://dev.h5xy.uheixia.com/activity/golden_egg/static/img/tip.a4f3598.png" ></image></view>
          <view v-if="item.sort == currentIndex && !item.isOpen"  class="hammer-box">
            <image class="hammer-img" :class="item.sort == currentIndex ? activeName : ''" mode="widthFix" src="https://dev.h5xy.uheixia.com/activity/golden_egg/static/img/hammer.be45806.png"></image>
          </view>
          <view v-if="item.sort == currentSelect"  class="hammer-box">
            <image class="hammer-img" :class="item.sort == currentSelect ? 'active' : ''" mode="widthFix" src="https://dev.h5xy.uheixia.com/activity/golden_egg/static/img/hammer.be45806.png" ></image>
          </view>
        </view>
		
      </view>
    </view>
	
	
	
    <view class="last-count">剩余次数: {{playNumber}}次</view>
	
	
	
  </view>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      animate:false,
      infoArr: [], // 滚动消息
      ruleShow: false,
      coreShow: false,
      nocoreShow: false,
      luckbagShow: false,
      getcoreShow: false,
      currentIndex: 0,
      runArr: [1,2,3,6,5,4], // 运行中金蛋选中顺序
      runArrDefault: [1,2,3,6,5,4], // 初始金蛋顺序
      giftArr: [{id: 1, sort: 1, isOpen: 0, type: 2, name: '福袋', x: 0, y: 0}, // 金蛋信息
        {id: 2, sort: 2, isOpen: 0, type: 1, x: 1, y: 0},
        {id: 3, sort: 3, isOpen: 0, type: 2, x: 2, y: 0},
        {id: 4, sort: 4, isOpen: 0, type: 1, x: 0, y: 1},
        {id: 5, sort: 5, isOpen: 0, type: 1, x: 1, y: 1},
        {id: 6, sort: 6, isOpen: 0, type: 2, x: 2, y: 1 }],
      timer1: null,
      currentSelect: 0,
      activeName: '', // 用于锤子移动动画类
      isLogin: false, // 是否登录
      loginShow: false, // 是否显示登录弹窗
      userInfov: {
		  
	  }, // 个人信息
      gifts: [], // 奖品列表
      consumeGold: 0, // 每次消耗金币数
      maskNumber: 6, // 剩余门板数
      playNumber: 6,  // 剩余次数
      openCount: 0, // 打开金蛋的个数
      currentCore: 0, // 当前抽奖金币显示数
      isNew: false // 版本是否高于2.8.11，高于为true
    }
  },
  components: {

  },
  computed: {
    // ...mapState({
    //   checkoutStatus: state => state.cart.checkoutStatus,
    //   products1: state => state.products.all
    // }),
    // ...mapGetters('cart', {
    //   products: 'cartProducts',
    //   total: 'cartTotalPrice'
    // })
  },
  created(){
    // this.getGiftSetting();
	this.run()
  },
  mounted () {

  },
  destroyed () {

  },
  methods: {
    draw(item, index) { // 抽奖
      let that = this;
      clearInterval(this.timer1);
	  that.maskNumber--, // 剩余门板数
	  that.playNumber--,  // 剩余次数
      that.currentIndex = 0;
      that.currentSelect = item.sort;
      that.giftArr[index].isOpen = 1;
	  that.giftArr[index].type = 1;   //对应奖品的图片状态值
      let temA = that.runArr.filter(itemv => itemv != item.sort);
      that.runArr = temA;
      setTimeout(function () {
        that.currentSelect = 0;
      },1000)
      if(that.openCount < 6) {
        that.openCount++
      }else {
        that.openCount = 6
      }
    },
    run() { // 砸金蛋锤子走动特效
      let that = this;
      this.timer1 = setInterval(function () {
        if (that.runArr.length < 1) {
          return false
        }
        let tempv = that.runArr[0];
        that.currentIndex = that.runArr[0];
        let preIndex = that.runArr[that.runArr.length-1];
        let tempX = that.giftArr[that.currentIndex-1].x - that.giftArr[preIndex-1].x;
        let tempY = that.giftArr[that.currentIndex-1].y - that.giftArr[preIndex-1].y;
        that.activeName = 'active' + tempX + tempY;
        that.runArr.shift();
        that.runArr.push(tempv);
      },2000)
    },

    smashedEgg(item, index) { // 砸金蛋
      let that = this;
      if(item.isOpen) {
        return false
      }
      if(this.playNumber<=0) {
        return false
      }
      that.draw(item, index);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .vg-parent {
    position: relative;
	// background: #0D9E13;
  }
  .vg-text-white {
    color: #fff;
  }
  .vg-wfull {
    width: 100%;
  }
  .vg-hfull {
    height: 100%;
  }
  @-webkit-keyframes shake-egg {
    0% {
      -webkit-transform: translateX(3px) rotate(2deg);
    }
    100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
    }
  }
  /*金蛋动画*/
  @-webkit-keyframes hammer {
    0% {
      transform:  rotate(-10deg)  rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer00 {
    0% {
      transform:  translate(0, 0px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer0-1 {
    0% {
      transform:  translate(0, 75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer-1-1 {
    0% {
      transform:  translate(75px, 75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer-2-1 {
    0% {
      transform:  translate(150px, 75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer10 {
    0% {
      transform:  translate(-75px, 0px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer1-1 {
    0% {
      transform:  translate(-75px, 75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer20 {
    0% {
      transform:  translate(-150px, 0px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer2-1 {
    0% {
      transform:  translate(-150px, 75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer01 {
    0% {
      transform:  translate(0px, -75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer-11 {
    0% {
      transform:  translate(75px, -75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer-21 {
    0% {
      transform:  translate(150px, -75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer-10 {
    0% {
      transform:  translate(75px, 0px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer-20 {
    0% {
      transform:  translate(150px, 0px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer11 {
    0% {
      transform:  translate(-75px, -75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammer21 {
    0% {
      transform:  translate(-150px, -75px);
    }
    30% {
      transform:  translate(0px, 0px);
    }
    80% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammera {
    0% {
      transform:  translateY(75px);
    }
    30% {
      transform:  translateY(0px);
    }
    60% {
      transform:  rotate(-10deg) rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammerb {
    0% {
      transform:  translateX(-75px);
    }
    30% {
      transform:  translateX(0px);
    }
    40% {
      transform:  rotate(-10deg)  rotate(-10deg);
    }
    100% {
      transform: rotate(0deg) rotate(0deg);
    }
  }
  @-webkit-keyframes hammerc {
    0% {
      transform:  translateY(-75px);
    }
    30% {
      transform:  translateY(0px);
    }
    40% {
      transform:  rotate(-10deg)  rotate(-10deg);
    }
    100% {
      transform: rotate(0deg)  rotate(0deg);
    }
  }
  @-webkit-keyframes hammerd {
    0% {
      transform:  translateX(75px);
    }
    30% {
      transform:  translateX(0px);
    }
    40% {
      transform:  rotate(-10deg)  rotate(-10deg);
    }
    100% {
      transform: rotate(0deg)  rotate(0deg);
    }
  }
  @-webkit-keyframes hammere {
    0% {
      transform:  translateX(75px) translateY(-75);
    }
    30% {
      transform:  translateX(0px) translateY(0);
    }
    40% {
      transform:  rotate(-10deg)  rotate(-10deg);
    }
    100% {
      transform: rotate(0deg)  rotate(0deg);
    }
  }
  @-webkit-keyframes hammerf {
    0% {
      transform:  translateX(150px) translateY(75);
    }
    30% {
      transform:  translateX(0px) translateY(0);
    }
    40% {
      transform:  rotate(-10deg)  rotate(-10deg);
    }
    100% {
      transform: rotate(0deg)  rotate(0deg);
    }
  }
  @-webkit-keyframes smashedegg {
    0% {
      background-image: url("../../../static/image/cutegg/sharkegg.png");
    }
    40% {
      background-image: url("../../../static/image/cutegg/sharkegg.png");
    }
    45% {
      background-image: url("../../../static/image/cutegg/sharkegg1.png");
    }
    50% {
      background-image: url("../../../static/image/cutegg/sharkegg2.png");
    }
    75% {
      background-image: url("../../../static/image/cutegg/sharkegg3.png");
    }
    100% {
      background-image: url("../../../static/image/cutegg/sharkegg4.png");
    }
  }


.box {
    width: 100%;
    height: 726px;
    background-size: cover;
    padding-top: 10px;
    position: relative;

   
}
	
	
.egg-box {
	
	// background: #007AFF;	
	
	  width: 100%;
	  margin-top: 71px;
	  padding: 0 22px;
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	  box-sizing: border-box;
}


.item {
	    width: 92px;
	    height: 122px;
		

		
	    margin-bottom: 14px;
}
	  
	  
.egg-size {
	      width: 99px;
		  
		  		// background-color: #007AFF;
		  
	      height: 122px;
	      background: url("../../../static/image/cutegg/egg-floor.png");
	      background-size: cover;
	      background-position: center;
}
	     
		 
.egg-pic {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-image: url("../../../static/image/cutegg/sharkegg4.png");
	-webkit-animation-name: smashedegg;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	background-color: #007AFF;
}



.item-img {
	        width: 100%;
	        height: 100%;
	        &.opentype1 {
	          background: url("../../../static/image/cutegg/sharkegg-core.png") no-repeat;
	          background-size: cover;
	          background-position: center;
	        }
	        &.opentype2 {
	          background: url("../../../static/image/cutegg/sharkegg-luck.png") no-repeat;
	          background-size: cover;
	          background-position: center;
	        }
	        &.unopen {
	          background: url("../../../static/image/cutegg/sharkegg.png") no-repeat;
	          background-size: cover;
	          background-position: center;
	        }
	
	        &.active {
	          -webkit-animation-name: shake-egg;
	          -webkit-animation-duration: 0.1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 6;
	        }
}


.text-box {
	      position: absolute;
	      width: 80px;
	      height: 40px;
	      top: -30px;
	      left: 50%;
	      margin-left: -50px;
	      .txt-img {
	        width: 100%;
	      }
}


.hammer-box {
	      width: 128px;
	      height: 128px;
	      position: absolute;
	      position: absolute;
	      top: -30px;
	      right: -82px;
	      z-index: 99;
		  
}
	
.hammer-img {
	        width: 100%;
	        position: relative;
	        z-index: 99;
	        &.active {
	          -webkit-animation-name: hammer;
	          -webkit-animation-duration: 0.2s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 2;
	        }
	        &.active00 {
	          -webkit-animation-name: hammer0-1;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1000;
	        }
	        &.active0-1 {
	          -webkit-animation-name: hammer0-1;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active-1-1 {
	          -webkit-animation-name: hammer-1-1;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active-2-1 {
	          -webkit-animation-name: hammer-2-1;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active10 {
	          -webkit-animation-name: hammer10;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active1-1 {
	          -webkit-animation-name: hammer1-1;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active20 {
	          -webkit-animation-name: hammer20;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active2-1 {
	          -webkit-animation-name: hammer2-1;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active01 {
	          -webkit-animation-name: hammer01;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active-11 {
	          -webkit-animation-name: hammer-11;
	          -webkit-animation-duration: 1.5s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active-21 {
	          -webkit-animation-name: hammer-21;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active-10 {
	          -webkit-animation-name: hammer-10;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active-20 {
	          -webkit-animation-name: hammer-20;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active11 {
	          -webkit-animation-name: hammer11;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	        &.active21 {
	          -webkit-animation-name: hammer21;
	          -webkit-animation-duration: 1s;
	          -webkit-animation-timing-function: linear;
	          -webkit-animation-iteration-count: 1;
	        }
	   
}
	  
	
	
   
 
   


 .last-count {
      width: 185px;
      height: 26px;
      margin: 32px auto 18px auto;
      // background:#007AFF;
      // color: #fff;
      text-align: center;
      font-size: 11px;
      line-height: 26px;
  
 }
 

 
 
 .small-egg {
       width: 10px;
       height: 16px;
 }
 
.anim{
    transition: all 0.5s;
    margin-top: -18px;
 }
  
  
  
</style>
